<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Collada模型加载</title>
    <script src="../dist/threebox-dev.js" type="text/javascript"></script>
    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
<div id='map' class='map'></div>
<script>
    minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
    minemap.solution = 66;
    var map = new minemap.Map({
        container: 'map',
        style: 'http://minedata.cn/service/solu/style/id/66',
        center: [116.4625506, 39.95246192],
        zoom: 15,
        pitch: 60,
        minZoom: 11,
        maxZoom: 22
    });
    map.repaint = true;

    var pointsArr = null;
    getJson('./data/points.json', function(data) {
        pointsArr = JSON.parse(data);
    });

    var blockLngLat = null;
    getJson('./data/block-lnglat.json', function(data) {
        blockLngLat = JSON.parse(data);
    });

    map.on("load", function () {
        var lt = [1, 1], 
            rb = [map._canvas.width - 1, map._canvas.height - 1];
        var ltLngLat = map.unproject(lt);
        var rbLngLat = map.unproject(rb);

        var geojson = {
            "type": "FeatureCollection",
            "features": []
        }

        var index = getindex(ltLngLat, rbLngLat);
        for(var i = 0; i < index.length; i++) {
            geojson["features"].push(pointsArr[index[i]]);
        }

        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();
        var symbols = threebox.addSymbolLayer({
            id: "trucks1",
            source: geojson,
            modelName: {generator: feature => (feature.properties['name'])},    // will look for an .obj and .mtl file with this name
            modelDirectory: "models/",          // in this directory
            rotation: {generator: feature => (new THREE.Euler(Math.PI / 2, 0, feature.properties['heading'] * Math.PI / 180 + Math.PI / 2, "ZXY"))},
            scale: {property: 'size'},
            scaleWithMapProjection: true,
            key: {property: "id"}
        });
        map.addControl(new minemap.Navigation(), 'bottom-right');

        //setInterval(updateData, 20000);
        //requestAnimationFrame(updateData);
        map.on('moveend', updateData);

        function updateData() {
            var lt = [1, 1], 
                rb = [map._canvas.width - 1, map._canvas.height - 1];
            var ltLngLat = map.unproject(lt);
            var rbLngLat = map.unproject(rb);

            var geojson = {
                "type": "FeatureCollection",
                "features": []
            }
            var index = getindex(ltLngLat, rbLngLat);
            for(var i = 0; i < index.length; i++) {
                geojson["features"].push(pointsArr[index[i]]);
            }
            console.log(index.length);
            symbols.updateSourceData(geojson);

            // threebox.layers.pop();
            // var symbols = threebox.addSymbolLayer({
            //     id: "trucks1",
            //     source: geojson,
            //     modelName: {generator: feature => (feature.properties['name'])},    // will look for an .obj and .mtl file with this name
            //     modelDirectory: "models/",          // in this directory
            //     rotation: {generator: feature => (new THREE.Euler(Math.PI / 2, 0, feature.properties['heading'] * Math.PI / 180 + Math.PI / 2, "ZXY"))},
            //     scale: {property: 'size'},
            //     scaleWithMapProjection: true,
            //     key: {property: "id"}
            // });
        }
    });

    function getJson(url, callback) {
        var xmlhttp = null;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        }
        else if (window.ActiveXObject) {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        if (xmlhttp != null) {
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {
                        callback.call(null, xmlhttp.responseText);
                    }
                    else {
                        alert("Problem retrieving data:" + xmlhttp.statusText);
                    }
                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send(null);
        }
        else {
            alert("Your browser does not support XMLHTTP.");
        }
    }

    function getindex(ltLngLat, rbLngLat) {
        let indexArr = [];
        for(var i = 0; i < blockLngLat.length; i++) {
            if(ltLngLat.lng < blockLngLat[i]['rbLng']
            && rbLngLat.lng > blockLngLat[i]['ltLng']
            && ltLngLat.lat > blockLngLat[i]['rbLat']
            && rbLngLat.lat < blockLngLat[i]['ltLat']) {
                indexArr.push(i);
            }
        }
        return indexArr;
    }
</script>
</body>